<template>
  <div class="template_import">
    <div class="add_container" @click="onTemplaon" v-hasPermi="['Built:Know:Template']">
      <svg-icon icon-class="zxkDr" size="24"></svg-icon>
      <div class="add_container_text">
        <p>模板</p>
        <span>从文件导入知识库</span>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" width="980" :show-close="false" :before-close="onClose">
      <template #header>
        <div class="dialog_title">
          <p>选择知识库模板</p>
          <el-icon :size="20" @click="onClose">
            <CloseBold />
          </el-icon>
        </div>
      </template>
      <div class="template_box">
        <div class="template_box_list">
          <div class="item-box">
            <div class="item-card" v-for="item in templateList" :key="item.id">
              <div class="box" @click="itemClick(item)"
                :style="{ border: selectedItem === item ? '1px solid rgb(20,86,240)' : '1px solid #e0e0e0' }">
                <img :src="item.url" />
                <div class="btm">
                  <p class="name">{{ item.realName }}</p>
                  <p class="desc">{{ item.remark }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="template_box_tree">
          <div class="percent">
            <h4 class="title">模板结构预览</h4>
            <div class="icon-item" v-if="isShow">
              <el-icon :size="96" color="#409EFF">
                <Operation />
              </el-icon>
              <p>选择一个模板，在此预览结构</p>
            </div>
            <div v-else>
              <el-tree style="max-width: 600px" :data="managementList" :props="defaultProps">
                <template #default="{ node, data }">
                  <div style="display: flex; align-items: center;">
                    <svg-icon :icon-class="data.type === 'folder' ? 'file-close' : selectSvgIcons(data)"></svg-icon>
                    <p class="text">{{ node.label }}</p>
                  </div>
                </template>
              </el-tree>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" :disabled="!selectedItem" @click="onNext">下一步</el-button>
      </div>
    </el-dialog>
    <AddDialog ref="addDialog" @onRefresh="refreshData" />
  </div>
</template>

<script setup lang='ts'>
import { getEnterpriseTemplateList, getKnowledgeTree } from '@/api/enterpriseDoc/enterpriseTemplateApi';
import AddDialog from './components/addDialog.vue';


const { proxy } = getCurrentInstance() as any;
const dialogVisible = ref<boolean>(false);
const templateList = ref<any[]>([
]);
const addDialog = ref<any>(null);
const isShow = ref<boolean>(true);
const selectedItem = ref(null);
const managementList = ref<any[]>([]);
const defaultProps = {
  children: 'children',
  label: 'realName'
};
const emits = defineEmits(['onRefresh']); //参数为数组

const queryParams = reactive({
  page: 1,
  size: 9999,
  total: 0
})

const selectSvgIcons = (v: any) => {
  return proxy.$yuUtils.selectSvgIcon(v);
};

// 获取模板列表
const getTemplateList = async () => {
  const res = await getEnterpriseTemplateList({
    page: queryParams.page - 1,
    size: queryParams.size
  });
  if (res.code == 200) {
    templateList.value = res.data.rows;
  }
}
const itemClick = async (item: { id: number }) => {
  selectedItem.value = item;
  const res = await getKnowledgeTree({
    id: item.id
  })
  if (res.code == 200) {
    isShow.value = false;
    managementList.value = res.data.children;
  }
}

const onNext = () => {
  addDialog.value.addClick(selectedItem);
}
// 打开弹窗
const onTemplaon = () => {
  dialogVisible.value = true;
  getTemplateList();
};
// 关闭弹窗
const onClose = () => {
  selectedItem.value = null;
  isShow.value = true;
  managementList.value = [];
  dialogVisible.value = false;
};
// 刷新数据
const refreshData = () => {
  onClose();
  emits('onRefresh');
}
</script>
<style scoped lang='scss'>
p {
  margin: 0;
}

:deep(.el-dialog) {
  padding: 0;
}

:deep(.el-dialog__header) {
  padding: 0 !important;
  border-bottom: none !important;
}

:deep(.el-dialog__body) {
  padding: 0 !important;
}

.template_import {
  .add_container {
    &:hover {
      background-color: rgba(31, 35, 41, 0.08);
    }

    width: 270px;
    height: 60px;
    border: 1px solid rgb(222, 224, 227);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 15px;

    .add_container_text {
      padding-left: 10px;

      p {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
      }

      span {
        font-size: 12px;
        color: rgb(100, 106, 115);
      }
    }

    .svg-icon {
      font-size: 24px;
    }
  }

  .dialog_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #e5e5e5;

    p {
      color: #1f2329;
    }

    i {
      cursor: pointer;

    }

    // color: red;
  }
}

.template_box {
  display: flex;
  background: rgb(245, 246, 247);

  .template_box_list {
    width: 680px;
    max-height: 600px;
    // padding-left: 24px;

    // justify-content: space-between;
    // margin-right: 20px;
    .item-box {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px 0px;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 20px;
      height: 570px;
      max-height: 570px;
      overflow: hidden;
      overflow-y: auto;

      .item-card {
        width: 206px;
        height: 176px;
        // margin-top: 20px;
        cursor: pointer;

        .box {
          width: 206px;
          height: 176px;
          background-color: #fff;
          border-radius: 8px;
          transition: 0.3s ease-out;

          img {
            width: 100%;
            height: 108px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            object-fit: cover;
          }

          .btm {
            padding: 9px 12px 16px;

            .name {
              font-size: 14px;
              color: #1f2329;
            }

            .desc {
              font-size: 12px;
              margin-top: 6px;
              color: #8f959e;
            }
          }

        }

        .box:hover {
          border: 1px solid rgb(20, 86, 240) !important;
          transform: scale(1.02);
        }

      }
    }
  }

  .template_box_tree {
    flex: 1;
    padding: 8px 8px 8px 4px;

    .percent {
      width: 278px;
      height: 100%;
      padding: 22px 7px 22px 28px;
      background-color: #fff;
      border: 1px solid #e5e5e5;
      box-shadow: 0px 2px 4px rgba(31, 35, 41, 0.12);
      border-radius: 8px;

      .title {
        font-size: 18px;
        color: #1f2329;
      }

      .icon-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1 1 0%;
        margin-top: 150px;

        p {
          font-size: 12px;
          color: #646a73;
        }
      }

      .text {
        // display: inline-block;
        // line-height: 1.5;
        margin-left: 4px;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.footer {
  padding: 16px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
</style>